<template>
  <div>
    <h3>v-on注册事件</h3>
    <!--1,v-on:事件名=“执行的少量代码” -->
    <!-- 2,v-on:事件名=“methods中的函数名” -->
    <!-- 3,v-on:事件名=“methods中的函数名（实参）” -->
    <!--简写
          v-on可以换成@来使用 
          @click=‘事件名’
          -->
    <p>拼西西-- {{ mos }}</p>
    <button v-on:click="mos = mos + 10">1</button>
    <button v-on:click="addMoney">2</button>
    <button @click="sellCar(5)">3</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mos: 999,
    };
  },
  methods: {
    addMoney() {
      //注意点：在methods中的方法内，如果想获取data中的数据，通过this获取
      // this 指的是当前的vue组件实例
      // data中声明的数据变量，都会挂载到！！当前！！的vue组件实例身上
      // 在methods中定义的方法，最终会挂载到！！当前！！的vue组件实例身上
      this.mos -= 10;
    },
    sellCar(tu) {
      this.mos += tu;
    },
  },
};
//注意点： data是提供数据的     methods是提供方法的
</script>

<style>
</style>